<template>
  <div class="build-el-time-list">
    <div class="item">
      <div
        v-for="(item,index) in timeList"
        :key="index"
        :class="active==index?'year year-active pointer':'year pointer'"
        @click="handYear(index,item.id)"
      >{{item.year}}年</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      active: 0,
      timeList: [],
    }
  },
  async mounted() {
    let res = await this.api.findHistoryVoteList({
      customizeId: 1,
    })
    console.log(res)
    this.timeList = res
  },
  methods: {
    handYear(index, id) {
      this.$emit('handYear', id)
      this.active = index
    },
  },
}
</script>
<style scoped lang="less">
.build-el-time-list {
  .item {
    width: 86px;
    border-right: 2px solid #e6e6e6;
    .year {
      color: #808080;
      font-size: 18px;
      height: 37px;
      line-height: 37px;
      position: relative;
      margin-bottom: 32px;
      width: 86px;
      &::after {
        content: '';
        position: absolute;
        right: 0;
        width: 2px;
        height: 100%;
        background-color: #e6e6e6;
      }
    }
    .year-active {
      color: #333333;
      font-size: 22px;
      height: 37px;
      line-height: 37px;
      position: relative;
      width: 86px;
      text-align: left;
      font-weight: bolder;
      &::after {
        content: '';
        position: absolute;
        right: 0;
        width: 2px;
        height: 100%;
        background-color: #de1929;
      }
    }
  }
}
</style>
